<template>
  <AdaptiveView>
    <div class="screen-container">
      <div class="screen-content" ref="screenRef">
        <div v-show="loading" class="mask flex-c">
          <dv-loading>
            <span class="loading-title">加载中...</span>
          </dv-loading>
        </div>
        <div v-if="!loading" class="h-full">
          <div class="h-full">
            <DataScreenHeader
              title="大连金泰清理线管理看板"
              :showMonth="false"
              classes=""
            />

            <div style="height: calc(100% - 100px)">
              <div
                style="height: calc(50% - 100px)"
                class="flex w-[100%] pb-[10px]"
              >
                <!-- 上左侧图表 -->
                <div class="flex-1 h-full card_class">
                  <div class="card_title">
                    <span>安全十字图({{ currentMonth }}月)</span>
                  </div>
                  <div class="echarts" style="height: calc(100% - 50px)">
                    <smelt-safety-cross-chart :second="1000 * 60 * 10" />
                  </div>
                </div>

                <div class="flex-1 h-full card_class">
                  <div class="card_title">
                    <span>当天出勤</span>
                  </div>
                  <div class="echarts" style="height: calc(100% - 50px)">
                    <today-attendance-pie :second="1000 * 60 * 10" />
                  </div>
                </div>

                <div class="flex-1 h-full card_class">
                  <div class="card_title">
                    <span>黑件实际产量（吨）</span>
                  </div>
                  <div class="echarts" style="height: calc(100% - 50px)">
                    <black-piece-yield-bar :second="1000 * 60 * 10" />
                  </div>
                </div>
              </div>

              <div
                style="height: calc(50% + 100px)"
                class="flex w-[100%] pb-[10px]"
              >
                <!-- 上左侧图表 -->
                <div class="flex-1 h-full card_class">
                  <div class="card_title">
                    <span>造型线运行情况</span>
                  </div>
                  <div class="echarts" style="height: calc(100% - 50px)">
                    <mold-running-condition :second="1000 * 2" />
                  </div>
                </div>

                <div class="flex-1 h-full card_class">
                  <div class="card_title">
                    <span>本日熔炼计划</span>
                  </div>
                  <div
                    class="echarts"
                    style="height: calc(100% - 45px); overflow: hidden"
                  >
                    <today-smelt-production-plan
                      :tableColumnNum="12"
                      style="padding: 10px"
                      :second="1000 * 60 * 1"
                    />
                  </div>
                </div>
                <div class="flex-1 h-full card_class">
                  <div class="card_title">
                    <span>上个月能耗统计</span>
                  </div>
                  <div class="echarts" style="height: calc(100% - 50px)">
                    <!-- <smelt-safety-cross-chart /> -->
                    <energy-statistics-last-month :second="1000 * 60 * 10" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdaptiveView>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useRoute } from "vue-router";
import dayjs from "dayjs";

defineOptions({
  name: "DATASCREENJTSMELTSCREEN",
  inheritAttrs: false,
});

const loading = ref(true);
const route = useRoute();
const currentMonth = dayjs().format("M");

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/home_bg.png");
  }

  .screen-content {
    width: 1678px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/home_bg.png");
    transition: all 0.2s ease-in-out;

    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }

  .element {
    background: linear-gradient(
      to right,
      rgba(0, 123, 255, 0.7),
      rgba(47, 150, 255, 0.7)
    );
  }
  :deep(.card_class) {
    margin: 0 4px;
    background-color: transparent;
    background: linear-gradient(
      to top,
      rgba(0, 123, 255, 0.2),
      rgba(47, 150, 255, 0.08)
    );

    .card_title {
      white-space: nowrap;
      font-size: 22px;
      color: #fff;
      background-image: url("@/assets/images/screen/bg-title.png") !important;
      background-repeat: no-repeat;
      // background-size: cover;
      background-position: left;
      padding: 0 20px 0 30px;
      // margin-bottom: 15px;
      background-size: auto 100%;
      span {
        font-family: YOUSHE;
        // color: rgb(204, 217, 241);
        color: #ceeaff;
      }
    }
  }
}
</style>
